<template>
  <div>
    <div class="top">
      <div>
        <div v-for="(item, index) in table_jibie" :key="index" class="top-jibie shou" :class="index_jibie === index?'top-select':''" @click="index_jibie=index;getLeibie()">{{item.name}}</div>
      </div>
      <div class="top-right shou" @click="openJibie()">级别管理</div>
    </div>
    <div class="main">
      <div class="add shou" @click="dialogLeibie=true;form_leibie.name='';form_leibie.id='';form_leibie.description='';form_leibie.rankId=table_jibie[index_jibie].id">新增类别<span style="font-size:28px;margin-top:-4px">+</span></div>
      <div v-for="(item, index) in table_leibie" :key="index" class="card">
        <div class="card-title" @click="openLeibie(index)">
          <div class="card-title1" style="font-weight:bold">
            {{item.name}}
            <i class="el-icon-edit shou icon-blue" title="修改本类别" @click.stop="dialogLeibie=true;form_leibie.name=item.name;form_leibie.id=item.id;form_leibie.description=item.description;form_leibie.rankId=item.rankId;index_leibie=index"></i>
            <i class="el-icon-delete shou icon-red" title="删除本类别" @click.stop="leibieDelete(index, item)"></i>
          </div>
          <div class="card-title2 shou"><span @click.stop="dialogGangwei=true;form_gangwei.name='';form_gangwei.id='';form_gangwei.departmentId=item.id;index_leibie=index" title="这是新增岗位">新增岗位</span><i class="card-title3" :class="item.panduan?'el-icon-arrow-down icon-color2':'el-icon-arrow-right icon-color1'"></i></div>
        </div>
        <div v-show="item.panduan">
          <div class="card-null" v-if="item.gangweis.length==0">暂无数据</div>
          <div v-for="(itemGangwei, indexGangwei) in item.gangweis" :key="indexGangwei" class="card1">
            <div class="card-title" style="background-color:white" @click="openGangwei(index,indexGangwei)">
              <div class="card-title1" style="color:#666666" :title="itemGangwei.name">
                {{itemGangwei.name}}
                <i class="el-icon-edit shou icon-blue" title="修改本岗位" @click.stop="dialogGangwei=true;form_gangwei.name=itemGangwei.name;form_gangwei.id=itemGangwei.id;form_gangwei.departmentId=itemGangwei.departmentId;index_leibie=index"></i>
                <i class="el-icon-delete shou icon-red" title="删除本岗位" @click.stop="gangweiDelete(index, indexGangwei, itemGangwei)"></i></div>
              <div class="card-title2 shou"><span @click.stop="dialogZhuanye=true;form_zhuanye.name='';form_zhuanye.id='';form_zhuanye.description='';form_zhuanye.positionId=itemGangwei.id;index_leibie=index;index_gangwei=indexGangwei">新增专业</span><i class="card-title3" :class="itemGangwei.panduan?'el-icon-arrow-down icon-color2':'el-icon-arrow-right icon-color1'"></i></div>
            </div>
            <div v-show="itemGangwei.panduan">
              <div class="card-null" v-if="itemGangwei.zhuanyes.length==0">暂无数据</div>
              <div class="card2" v-if="itemGangwei.zhuanyes.length">
                <div v-for="(itemZhuanye, indexZhuanye) in itemGangwei.zhuanyes" class="zhuanye" :style="{margin:(indexZhuanye%4==0?'20px 0 0 0':'20px 0 0 24px')}" :key="indexZhuanye">
                  <span :title="itemZhuanye.name">{{itemZhuanye.name}}</span><div>
                    <i class="el-icon-edit shou icon-blue" title="修改本专业" @click="dialogZhuanye=true;form_zhuanye.name=itemZhuanye.name;form_zhuanye.id=itemZhuanye.id;form_zhuanye.description=itemZhuanye.description;form_zhuanye.positionId=itemZhuanye.positionId;index_leibie=index;index_gangwei=indexGangwei;index_zhuanye=indexZhuanye"></i>
                    <i class="el-icon-delete shou icon-red" title="删除本专业" @click="zhuanyeDelete(index, indexGangwei, indexZhuanye, itemZhuanye)"></i></div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- <div class="add-gangwei shou" @click="dialogGangwei=true;form_gangwei.name='';form_gangwei.id='';form_leibie.departmentId=item.id">新增岗位<span style="font-size:28px;margin-top:-4px">+</span></div> -->
        </div>
      </div>
    </div>
    <el-dialog title="级别管理" :visible.sync="dialogJibie">
      <el-button type="primary" size="mini" @click="table_jibie.unshift({name:'',description:'',id:''})">新增级别</el-button>
      <el-table :data="table_jibie">
        <el-table-column property="date" label="级别名称" width="200">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.name" />
          </template>
        </el-table-column>
        <el-table-column property="name" label="级别介绍">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.description" />
          </template>
        </el-table-column>
        <el-table-column property="address" label="操作" width="160" align="center">
          <template slot-scope="scope">
              <el-button v-if="scope.row.id" type="text" @click="xiugaiJibie(scope)">修改</el-button>
              <el-button v-else type="text" @click="xiugaiJibie(scope)">提交</el-button>
              <el-button v-if="scope.row.id" type="text" @click="shanchuJibie(scope)">删除</el-button>
              <el-button v-else type="text" @click="shanchuJibie(scope)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="类别管理" width="35%" :visible.sync="dialogLeibie">
      <el-row>
        <el-col :span="7"><div class="label">类别名称：</div></el-col>
        <el-col :span="13"><el-input v-model="form_leibie.name" size="small" /></el-col>
        <el-col :span="7"><div class="label">类别介绍：</div></el-col>
        <el-col :span="13"><el-input v-model="form_leibie.description" size="small" /></el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLeibie = false">取 消</el-button>
        <el-button v-if="form_leibie.id" type="primary" :disabled="form_leibie.name==''||form_leibie.description==''" @click="leibieAdd('修改')">确 定</el-button>
        <el-button v-else type="primary" :disabled="form_leibie.name==''||form_leibie.description==''" @click="leibieAdd('新增')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="岗位管理" width="35%" :visible.sync="dialogGangwei">
      <el-row>
        <el-col :span="7"><div class="label">岗位名称：</div></el-col>
        <el-col :span="13"><el-input v-model="form_gangwei.name" size="small" /></el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogGangwei = false">取 消</el-button>
        <el-button v-if="form_gangwei.id" type="primary" :disabled="form_gangwei.name==''" @click="gangweiAdd('修改')">确 定</el-button>
        <el-button v-else type="primary" :disabled="form_gangwei.name==''" @click="gangweiAdd('新增')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="专业管理" width="35%" :visible.sync="dialogZhuanye">
      <el-row>
        <el-col :span="7"><div class="label">专业名称：</div></el-col>
        <el-col :span="13"><el-input v-model="form_zhuanye.name" size="small" /></el-col>
        <el-col :span="7"><div class="label">专业介绍：</div></el-col>
        <el-col :span="13"><el-input v-model="form_zhuanye.description" size="small" /></el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogZhuanye = false">取 消</el-button>
        <el-button v-if="form_zhuanye.id" type="primary" :disabled="form_zhuanye.name==''||form_zhuanye.description==''" @click="zhuanyeAdd('修改')">确 定</el-button>
        <el-button v-else type="primary" :disabled="form_zhuanye.name==''||form_zhuanye.description==''" @click="zhuanyeAdd('新增')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import $http from '@/utils/request'
import $httpJSON from '@/utils/requestJSON'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data () {
    return {
      span1: 3,
      span2: 9,
      dialogJibie: false,
      dialogLeibie: false,
      dialogGangwei: false,
      dialogZhuanye: false,
      index_jibie: 0,
      index_leibie: 0,
      index_gangwei: 0,
      index_zhuanye: 0,
      value: '',
      values: [],
      form_leibie: {
        rankId: '',
        id: '',
        name: '',
        description: ''
      },
      form_gangwei: {
        id: '',
        name: '',
        departmentId: ''
      },
      form_zhuanye: {
        id: '',
        name: '',
        description: '',
        positionId: ''
      },
      form: {
        id: '',
        name: '',
        description: ''
      },
      table_jibie: [],
      table_leibie: [],
      table_gangwei: [],
      jibies: [{
        name: '级别一',
        value: 1,
      }, {
        name: '级别二',
        value: 2,
      }],
      zhuanyes: [{
        panduan: false
      },{
        panduan: false
      }],
      options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }]
    }
  },
  mounted() {
    this.getJibie()
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    getJibie() {
      $http.get('/admin/examinee/rank/getlist').then(response => {
        if (response.success) {
          this.table_jibie = response.data
          this.getLeibie()
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
    },
    getLeibie() {
      $http.get('/admin/examinee/rank/get/' + this.table_jibie[this.index_jibie].id).then(response => {
        if (response.success) {
          let table = []
          console.log(response)
          for(let i = 0; i < response.data.examineeDepartments.length; i++) {
            response.data.examineeDepartments[i].panduan = false
            response.data.examineeDepartments[i].gangweis = []
            table.push(response.data.examineeDepartments[i])
          }
          console.log(table)
          this.table_leibie = table
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
    },
    openLeibie(index) {
      console.log('openLeibie')
      if (this.table_leibie[index].gangweis.length>0 || this.table_leibie[index].panduan===true) {
        this.table_leibie[index].panduan = !this.table_leibie[index].panduan
      } else {
        $http.get('/admin/examinee/department/get/' + this.table_leibie[index].id).then(response => {
          this.table_leibie[index].panduan = !this.table_leibie[index].panduan
          if (response.success) {
            let table = []
            for(let i = 0; i < response.data.examineePositions.length; i++) {
              response.data.examineePositions[i].panduan = false
              response.data.examineePositions[i].zhuanyes = []
              table.push(response.data.examineePositions[i])
            }
            this.table_leibie[index].gangweis = table
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
          
        }).catch(error => {
          console.log(error)
        })
      }
    },
    openGangwei(index,indexGangwei) {
      console.log('openGangwei')
      if (this.table_leibie[index].gangweis[indexGangwei].zhuanyes.length>0 ||this.table_leibie[index].gangweis[indexGangwei].panduan===true) {
        this.table_leibie[index].gangweis[indexGangwei].panduan = !this.table_leibie[index].gangweis[indexGangwei].panduan
      } else {
        this.table_leibie[index].gangweis[indexGangwei].panduan = !this.table_leibie[index].gangweis[indexGangwei].panduan
        $http.get('/admin/examiner/position/get/' + this.table_leibie[index].gangweis[indexGangwei].id).then(response => {
        if (response.success) {
          let table = []
          for(let i = 0; i < response.data.examineeProfessionVos.length; i++) {
            response.data.examineeProfessionVos[i].panduan = false
            response.data.examineeProfessionVos[i].zhuanyes = []
            table.push(response.data.examineeProfessionVos[i])
          }
          console.log(this.table_leibie[index].gangweis[indexGangwei])
          this.table_leibie[index].gangweis[indexGangwei].zhuanyes = table
          console.log(this.table_leibie[index].gangweis[indexGangwei])
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
      }
    },
    xiugaiJibie(val) {
      console.log(this.table_jibie)
      if (val.row.id) {
        $httpJSON.post('/admin/examinee/rank/amend', val.row).then(response => {
          if (response.success) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
          
        }).catch(error => {
          console.log(error)
        })
      } else {
        $httpJSON.post('/admin/examinee/rank/add', val.row).then(response => {
          if (response.success) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            val.row.id = response.data
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
          
        }).catch(error => {
          console.log(error)
        })
      }
    },
    shanchuJibie(val) {
      console.log(val)
      if (val.row.id) {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $httpJSON.post('/admin/examinee/rank/remove/' + val.row.id).then(response => {
            if (response.success) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.table_jibie.splice(val.$index, 1)
            } else  {
              this.$message({
                message: response.msg,
                type: 'error',
                duration: 2000
              })
            }
            
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          }) 
        })
      } else  {
        this.table_jibie.splice(val.$index, 1)
      }
    },
    leibieAdd (val) {
      if (val === '新增') {
        $httpJSON.post('/admin/examinee/department/add', this.form_leibie).then(response => {
            if (response.success) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.table_leibie.push({
                id: response.data,
                name: this.form_leibie.name,
                description: this.form_leibie.description,
                rankId: this.form_leibie.rankId,
                panduan: false,
                gangweis: []
              })
              this.dialogLeibie = false
            } else  {
              this.$message({
                message: response.msg,
                type: 'error',
                duration: 2000
              })
            }
            
          }).catch(error => {
            console.log(error)
          })
      } else {
        $httpJSON.post('/admin/examinee/department/amend', this.form_leibie).then(response => {
            if (response.success) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.table_leibie[this.index_leibie].name = this.form_leibie.name
              this.table_leibie[this.index_leibie].description = this.form_leibie.description
              this.dialogLeibie = false
            } else  {
              this.$message({
                message: response.msg,
                type: 'error',
                duration: 2000
              })
            }
            
          }).catch(error => {
            console.log(error)
          })
      }
    },
    gangweiAdd (val) {
      if (val === '新增') {
        $httpJSON.post('/admin/examiner/position/add', this.form_gangwei).then(response => {
          if (response.success) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.table_leibie[this.index_leibie].gangweis.push({
              id: response.data,
              name: this.form_gangwei.name,
              departmentId: this.form_gangwei.departmentId,
              panduan: false,
              zhuanyes: []
            })
            this.dialogGangwei = false
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
          
        }).catch(error => {
          console.log(error)
        })
      } else {
        $httpJSON.post('/admin/examiner/position/amend', this.form_gangwei).then(response => {
          if (response.success) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.table_leibie[this.index_leibie].gangweis[this.index_gangwei].name = this.form_gangwei.name
            this.dialogGangwei = false
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
          
        }).catch(error => {
          console.log(error)
        })
      }
    },
    zhuanyeAdd (val) {
      if (val === '新增') {
        $httpJSON.post('/examinee/profession/add', this.form_zhuanye).then(response => {
          if (response.success) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.table_leibie[this.index_leibie].gangweis[this.index_gangwei].zhuanyes.push({
              id: response.data,
              name: this.form_zhuanye.name,
              positionId: this.form_zhuanye.positionId,
              description: this.form_zhuanye.description
            })
            this.dialogZhuanye = false
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
          
        }).catch(error => {
          console.log(error)
        })
      } else {
        this.form_zhuanye.logicalDelete = this.table_leibie[this.index_leibie].gangweis[this.index_gangwei].zhuanyes[this.index_zhuanye].logicalDelete
        $httpJSON.post('/examinee/profession/amend', this.form_zhuanye).then(response => {
          if (response.success) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.table_leibie[this.index_leibie].gangweis[this.index_gangwei].zhuanyes[this.index_zhuanye] = {
              id: this.form_zhuanye.id,
              name: this.form_zhuanye.name,
              logicalDelete: this.form_zhuanye.logicalDelete,
              positionId: this.form_zhuanye.positionId,
              description: this.form_zhuanye.description
            }
            this.dialogZhuanye = false
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
          
        }).catch(error => {
          console.log(error)
        })
      }
    },
    leibieDelete (index, item) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $httpJSON.post('/admin/examinee/department/remove/' + item.id).then(response => {
            if (response.success) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.table_leibie.splice(index, 1)
            } else  {
              this.$message({
                message: response.msg,
                type: 'error',
                duration: 2000
              })
            }
            
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          }) 
        })
    },
    gangweiDelete (index_leibie, index_gangwei, item) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $httpJSON.post('/admin/examiner/position/remove/' + item.id).then(response => {
            if (response.success) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.table_leibie[index_leibie].gangweis.splice(index_gangwei, 1)
            } else  {
              this.$message({
                message: response.msg,
                type: 'error',
                duration: 2000
              })
            }
            
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          }) 
        })
    },
    zhuanyeDelete (index_leibie, index_gangwei, index, item) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $httpJSON.post('/examinee/profession/remove/' + item.id).then(response => {
            if (response.success) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.table_leibie[index_leibie].gangweis[index_gangwei].zhuanyes.splice(index, 1)
            } else  {
              this.$message({
                message: response.msg,
                type: 'error',
                duration: 2000
              })
            }
            
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          }) 
        })
    },
    openJibie() {
      this.getJibie()
      this.dialogJibie = true
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  margin: 0px 20px 20px 20px;
}
.top-jibie{
  float: left;
  width: 60px;
  height: 46px;
  margin-right: 30px;
  color: rgba(153, 153, 153, 100);
  font-size: 14px;
  text-align: center;
  font-family: PingFangSC-Regular;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-select {
  color: #1890FF;
  border-bottom: 2px solid #1890FF;
}
.top-right{
  float: right;
  width: 100px;
  height: 36px;
  color: rgba(255, 255, 255, 100);
  font-size: 16px;
  text-align: left;
  font-family: MicrosoftYaHei-Bold;
  border-radius: 4px;
  background-color: rgba(24, 144, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.add{
  width:100%;
  height: 41px;
  margin: 24px 0 20px 0;

  color: rgba(24, 144, 255, 100);
  font-size: 16px;
  font-family: MicrosoftYaHei;

  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(24, 144, 255, 1);
  border-radius: 4px;
}
.add-gangwei{
  width:100%;
  height: 41px;
  margin: 10px 0 10px 0;

  color: rgba(24, 144, 255, 100);
  font-size: 16px;
  font-family: MicrosoftYaHei;

  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(24, 144, 255, 1);
  border-radius: 4px;
}
.card{
  width: 100%;
  margin-top: 14px;
  overflow: hidden;
}
.card1{
  width: 100%;
  // padding-left: 20px;
  overflow: hidden;
}
.card-null{
  width: 100%;
  min-height:80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}
.card2{
  width: 100%;
  padding: 0px 34px 20px 34px ;
  min-height: 100px;
  background-color: white;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  // padding-left: 20px;
  overflow: hidden;
}
.zhuanye{
  width: calc(25% - 18px);
  height: 48px;
  padding-left: 20px;
  padding-right: 20px;
  color: rgba(102, 102, 102, 100);
  font-size: 14px;
  border: 1px solid rgba(217, 217, 217, 1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title{
  width:100%;
  height: 56px;
  border-radius: 2px;
  background-color: rgba(247, 249, 250, 1);
  border: 1px solid rgba(233, 233, 233, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title1{
  margin-left: 32px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold;
}
.card-title2{
  color: rgba(24, 144, 255, 100);
  font-size: 14px;
  line-height:30px;
  font-family: MicrosoftYaHei;
}
.card-title3{
  padding: 0 21px;
  font-size: 18px;
  font-weight: bold;
  line-height:30px;
}
.icon-color1{
  color: #C2C3C4;
}
.icon-color2{
  color: rgba(51, 51, 51, 1);
}
.icon-blue{
  font-size: 18px;
  margin-left: 6px;
  color: #409EFF;
}
.icon-red{
  font-size: 18px;
  margin-left: 6px;
  color: #F56C6C;
}
.label{
  line-height:30px;
  float: right;
}
.el-col{
  margin-bottom:10px;
}
</style>
